var myApp = new Vue({
    el:"#myApp",
    data:{
        title:'霜云后台管理系统',
        timer:null,
        flexibleClass:'',
        defaultWindow:'home/console.html',
        tabJson:{},
        isAddTablist:false,//是否已经添加到tablist
        isAddTablistIndex:0,
        navList:[
            {id:1,name:'主页',icon:'layui-icon-home',href:'a',active:false,open:true,child:[
                {id:2,name:'控制台',href:'home/console.html',active:true,open:false},
                {id:3,name:'主页一',href:'home/c.html',active:false,open:false},
                {id:4,name:'主页二',href:'home/d.html',active:false,open:false},
            ]},
            {id:5,name:'组件',icon:'layui-icon-component',href:'e',active:false,open:false,child:[
                {id:6,name:'格栅',href:'f',active:false,open:false,child:[
                    {id:7,name:'等比例列表排列',href:'home/g.html',active:false,open:false},
                    {id:8,name:'按移动端排列',href:'home/h.html',active:false,open:false},
                    {id:9,name:'移动桌面端组合',href:'home/i.html',active:false,open:false},
                ]},
                {id:10,name:'按钮',href:'home/j.html',active:false,open:false},
                {id:11,name:'表单',href:'home/k.html',active:false,open:false},
                {id:12,name:'导航',href:'home/l.html',active:false,open:false},
            ]},
            {id:13,name:'页面',icon:'layui-icon-template',href:'home/m.html',active:false,open:false},
            {id:14,name:'菜单',icon:'layui-icon-template',href:'home/n.html',active:false,open:false},
            {id:15,name:'模型',icon:'layui-icon-template',href:'home/j.html',active:false,open:false},
            {id:16,name:'流程',icon:'layui-icon-template',href:'home/k.html',active:false,open:false},
        ],
        navList:[
            {id:1,name:'主页',icon:'layui-icon-home',href:'a',active:false,open:true,child:[
                {id:2,name:'控制台',href:'home/console.html',active:true,open:false},
            ]},
            {id:5,name:'系统',icon:'layui-icon-component',href:'e',active:false,open:false,child:[               
                {id:10,name:'管理员管理',href:'home/manager.html',active:false,open:false},
                {id:11,name:'角色管理',href:'home/k.html',active:false,open:false},
                {id:12,name:'系统配置',href:'home/l.html',active:false,open:false},
                {id:14,name:'节点管理',href:'home/l.html',active:false,open:false},
            ]},
            {id:13,name:'网站',icon:'layui-icon-template',href:'home/m.html',active:false,open:false,child:[
                {id:15,name:'文章管理',href:'home/k.html',active:false,open:false},
                {id:16,name:'栏目管理',href:'home/l.html',active:false,open:false},
                {id:17,name:'标签管理',href:'home/l.html',active:false,open:false},
                {id:18,name:'单页管理',href:'home/l.html',active:false,open:false},
                {id:19,name:'模型管理',href:'home/l.html',active:false,open:false},
                {id:20,name:'咨询管理',href:'home/l.html',active:false,open:false},
                {id:21,name:'幻灯片管理',href:'home/l.html',active:false,open:false},
                {id:22,name:'导航管理',href:'home/l.html',active:false,open:false},
            ]},
        ],
        tabList:[
            {id:2,name:'控制台',active:true,index:[0,0]},
        ]
    },
    methods:{
        flexible:function(){
            if(window.innerWidth > 995){
                this.flexibleClass = (this.flexibleClass == "") ? "layadmin-side-shrink" : "";
            }else{
                this.flexibleClass = (this.flexibleClass == "") ? "layadmin-side-spread-sm" : "";
            };
        },
        closeShade:function(){
            this.flexibleClass = (this.flexibleClass == "") ? "layadmin-side-spread-sm" : "";
        },
        /* sidenav */
        openFirstNav:function(i){
            if(this.flexibleClass != ""){ this.flexible(); };
            if(this.navList[i].child){
                this.navList[i].open = !this.navList[i].open;
                return false;
            };
            clearTimeout(this.timer);
            this.timer = setTimeout(()=>{   
                this.tabJson = {};
                this.defaultWindow = this.navList[i].href;
                this.tabJson = {id:this.navList[i].id,name:this.navList[i].name,active:true,index:[i]};
                this.clearNavActive();
                this.navList[i].active = true;
                this.findTabIndex(this.navList[i].id);
                if(this.isAddTablist){
                    this.clearTabActive();
                    this.tabList[this.isAddTablistIndex].active = true;
                    this.isAddTablist = false;
                    return false;
                };
                this.clearTabActive();
                this.tabList.push(this.tabJson);
            },300);
        },
        openSecondNav:function(i,ii){
            if(this.navList[i].child[ii].child){
                this.navList[i].child[ii].open = !this.navList[i].child[ii].open;
                return false;
            };
            clearTimeout(this.timer);
            this.timer = setTimeout(()=>{
                this.tabJson = {};
                this.defaultWindow = this.navList[i].child[ii].href;
                this.tabJson = {id:this.navList[i].child[ii].id,name:this.navList[i].child[ii].name,active:true,index:[i,ii]};
                this.clearNavActive();
                this.navList[i].child[ii].active = true;
                this.findTabIndex(this.navList[i].child[ii].id);
                if(this.isAddTablist){
                    this.clearTabActive();
                    this.tabList[this.isAddTablistIndex].active = true;
                    this.isAddTablist = false;
                    return false;
                };
                this.clearTabActive();
                console.log(this.tabJson);
                this.tabList.push(this.tabJson);
            },300);
        },
        openThirdNav:function(i,ii,iii){
            if(this.navList[i].child[ii].child[iii].child){
                this.navList[i].child[ii].child[iii].open = !this.navList[i].child[ii].child[iii].open;
                return false;
            };
            clearTimeout(this.timer);
            this.timer = setTimeout(()=>{
                this.tabJson = {};
                this.defaultWindow = this.navList[i].child[ii].child[iii].href;
                this.tabJson = {id:this.navList[i].child[ii].child[iii].id,name:this.navList[i].child[ii].child[iii].name,active:true,index:[i,ii,iii]};
                this.clearNavActive();

                console.log(this.navList[i].child[ii].child[iii]);

                this.navList[i].child[ii].child[iii].active = true;

                this.findTabIndex(this.navList[i].child[ii].child[iii].id);
                if(this.isAddTablist){
                    this.clearTabActive();
                    this.tabList[this.isAddTablistIndex].active = true;
                    this.isAddTablist = false;
                    return false;
                };
                this.clearTabActive();
                this.tabList.push(this.tabJson);
            },300);
        },
        openDbFirstNav:function(i){
            clearTimeout(this.timer);
            console.log('我是双击');
            console.log(i);
        },
        openDbSecondNav:function(i,ii){
            clearTimeout(this.timer);
            console.log('我是双击');
            console.log(i,ii);
        },
        openDbThirdNav:function(i,ii,iii){
            clearTimeout(this.timer);
            console.log('我是双击');
            console.log(i,ii,iii);
            // window.open("https://www.baidu.com/","_blank");
        },
        /*tab*/
        clearTabActive:function(){
            this.tabList.forEach((item,index)=>{
                this.tabList[index].active = false;
            });
        },
        /*查找Tab里面是否已经存在*/
        findTabIndex:function(id){
            this.tabList.forEach((item,index)=>{
                if(item.id == id){
                    this.isAddTablist = true;
                    this.isAddTablistIndex = index;
                };
            });
        },
        openTab:function(i){
            this.clearTabActive();
            this.tabList[i].active = true;
            if(this.tabList[i].index.length == 1){
                this.defaultWindow = this.navList[this.tabList[i].index[0]].href;
                this.clearNavActive();
                this.navList[this.tabList[i].index[0]].active = true;
            };
            if(this.tabList[i].index.length == 2){
                this.defaultWindow = this.navList[this.tabList[i].index[0]].child[this.tabList[i].index[1]].href;
                this.clearNavActive();
                this.navList[this.tabList[i].index[0]].child[this.tabList[i].index[1]].active = true;
            };
            if(this.tabList[i].index.length == 3){
                this.defaultWindow = this.navList[this.tabList[i].index[0]].child[this.tabList[i].index[1]].child[this.tabList[i].index[2]].href;
                this.clearNavActive();
                this.navList[this.tabList[i].index[0]].child[this.tabList[i].index[1]].child[this.tabList[i].index[2]].active = true;
            };
        },
        clearNavActive:function(){
            this.navList.forEach((item,index)=>{
                this.navList[index].active = false;
                if(this.navList[index].child){
                    this.navList[index].child.forEach((items,indexs)=>{
                        this.navList[index].child[indexs].active = false;
                        if(this.navList[index].child[indexs].child){
                            this.navList[index].child[indexs].child.forEach((itemss,indexss)=>{
                                this.navList[index].child[indexs].child[indexss].active = false;
                            });
                        };
                    });
                };
            });
        },
        delTab:function(i){
            if(this.tabList[i].active){
                this.tabList.splice(i,1);
                if(this.tabList[i]){
                    this.openTab(i);
                }else{
                    this.openTab(this.tabList.length - 1);
                };
            }else{
                this.tabList.splice(i,1);
            };
        },        
    }
});